<script setup lang="ts">
import { deviceDetection } from "@pureadmin/utils";

import Player from "xgplayer";
import "xgplayer/dist/index.min.css";

const props = defineProps({
  url: {
    type: String,
    default: ""
  },
  poster: {
    type: String,
    default: ""
  }
});

onMounted(() => {
  new Player({
    id: "_video_player",
    lang: "zh",
    // 默认静音
    volume: 0,
    autoplay: false,
    screenShot: true,
    videoAttributes: {
      crossOrigin: "anonymous"
    },
    url: props.url,
    poster: props.poster,
    fluid: deviceDetection(),
    playbackRate: [0.5, 0.75, 1, 1.5, 2, 3],
    width: "100%"
  });
});
</script>

<template>
  <div id="_video_player" class="mb-3" />
</template>

<style scoped>
#mse {
  flex: auto;
}
</style>
